<template>
    <link type="text/css" rel="stylesheet" href="/assets/css/style.css">
    <!-- 标签栏 -->
    <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange">
        <van-tab v-for="(item,key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="true"
      finished-text="没有更多了"   
      @load="load"
    >
        <!-- 商品卡片 -->
        <van-card
          v-for="(item, key) in list"
          :title="item.info.products.name"
          :thumb="item.info.products.thumbs_text"
          :num="item.info.pronum"
          :tag="item.status_text"
          @click-thumb="toProductInfo(item.info.proid)"
        >
          <template #title>
            <div class="title">订单号：{{item.code}}</div>
          </template>

          <!-- 卡片的插槽部分 -->
          <template #desc v-if="item.info.attrs">
            <van-tag v-for="(attr,index) in item.info.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
          </template>
          <template #desc v-else>
            <van-tag class="tag" type="danger">无规格数据</van-tag>
          </template>

          <template #tags>
            <div class="price">下单时间：￥{{item.createtime_text}}</div>
          </template>

          <template #price>
            <div class="price">订单总价：￥{{item.amount}}</div>
          </template>

          <template #footer>
            <van-button type="danger" size="small" v-if="item.status == '1'" @click="OrderApply(item.id)">申请退款</van-button>
            <van-button type="danger" size="small" v-if="item.status == '-1'">待审核退款申请</van-button>

            <van-button type="success" size="small" v-if="item.status == '2'" @click="OrderConfirm(item.id)">确认收货</van-button>
            <van-button type="warning" size="small" v-if="item.status == '2'" @click="OrderExpress(item.id)" >物流详情</van-button>
            <van-button type="danger" size="small" v-if="item.status == '2'" @click="OrderApply(item.id)">申请退货退款</van-button>

            <van-button type="danger" size="small" v-if="item.status == '-2'">待审核退货退款申请</van-button>

            <van-button type="warning" size="small" v-if="item.status == '-3'" @click="ToBackAdd(item.id)">填写退货信息</van-button>

            <van-button type="warning" size="small" v-if="item.status == '3'" @click="OrderRateinfo(item.id)">立即评价</van-button>

            <van-button type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>

            <!-- 
            
            
            <van-button type="primary" size="small">申请退货</van-button>
           
            <van-button type="primary" size="small">退货详情</van-button> -->
          </template>
        </van-card>
    </van-list>
  </van-pull-refresh>

  <!-- 退款的弹框 -->
  <van-popup v-model:show="ApplyShow" position="bottom">
    <van-form @submit="OrderApplyConfirm">
      <van-field
        v-model="remark"
        name="remark"
        rows="6"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入申请原因"
        show-word-limit
        :rules="[{required:true,message:'请填写申请原因'}]"
      />
      <van-button square block color="linear-gradient(160deg,#0093E9 0%,#80D0C7 100%)" native-type="submit">提交申请</van-button>
    </van-form>
  </van-popup>
</template>

<script setup>
    const {proxy} = getCurrentInstance()

    //标签栏数据
    let StatusActive = ref('')
    let StatusList = ref([
        {title: '全部',value: ''},
        {title: '已支付',value: '1'},
        {title: '已发货',value: '2'},
        {title: '已收货',value: '3'},
        {title: '已完成',value: '4'},
        {title: '退款退货',value: '-1'},
    ])
 
    //下拉刷新的数据
    let list = ref([]) //数据列表
    let page = ref(1) //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新

    //申请仅退款
    let orderid = ref(0)
    let ApplyShow = ref(false)
    let remark = ref('')

    //标签栏切换
    const TabChange = async ({ name }) => { refresh() }

    //下拉刷新
    const refresh = async () =>
    {
        //清空查询参数
        page.value = 1
        list.value = []
        finished.value = false
        loading.value = true
        //加载数据方法
        load()
    }

    //加载数据方法 查询订单数据
    const load = async () =>
    {
        //判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false
        }

        //组装数据
        var params = {
            busid: proxy.$business.value.id,
            status: StatusActive.value,
            page: page.value
        }

        //发起请求
        var result = await proxy.$POST({
            url: '/order/index',
            params
        })

        //请求发送完毕后，加载状态也就完毕了
        loading.value = false
        
        //如果没有更多数据了 就说明已经加载到底了
        if(result.code == 0)
        {
            finished.value = true
            return;
        }

        //数据修改
        result.data.map(item => {
            if(item.info)
            {
                item.info.attrs = JSON.parse(item.info.attrs)
            }
        })

        list.value = list.value.concat(result.data)
        page.value++
    }

    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})

    //跳转订单详情
    const OrderInfo = (orderid) => proxy.$router.push({path:'/order/info',query:{orderid:orderid}})

    //申请退款 / 申请退货退款
    const OrderApply = (id) =>
    {
        orderid.value = id
        ApplyShow.value = true
    }
    const OrderApplyConfirm = async (values) => 
    {
        //关闭弹框
        ApplyShow.value = false

        //发送请求
        var result = await proxy.$POST({
          url: '/order/apply',
          params: {
            busid: proxy.$business.value.id,
            orderid: orderid.value,
            remark: remark.value,
          }
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        proxy.$success({
          message: result.msg,
          duration: 3000,
          onClose: () => refresh()
        })
    }

    //填写退货单
    const ToBackAdd = (id) => proxy.$router.push({path: '/back/add',query:{orderid:id}})

    //确认收货
    const OrderConfirm = async (id) =>
    {
      proxy.$confirm({
        title: '收货提醒',
        message: '是否确认收货',
      }).then(async () => {
        var result = await proxy.$POST({
          url: '/order/confirm',
          params: {
            busid: proxy.$business.value.id,
            orderid: id,
          }
        })

        if(result.code === false)
        {
          proxy.$fail(result.msg)
          return false
        }else
        {
          proxy.$success({
            message: result.msg,
            onClose: () => refresh()
          })
          return false
        }
        
      }).catch(()=>{})
    }

    //跳转到物流详情
    const OrderExpress = (orderid) => proxy.$router.push({path:'/order/express',query:{orderid:orderid}})

    //跳转到商品评价
    const OrderRateinfo = (orderid) => proxy.$router.push({path:'/order/rateinfo',query:{orderid:orderid}})
</script>